<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript">
    var limitResults=10;
    Event.observe(window, 'load', function() {
       $('searchButton').observe('click',getSongs);
       //instant search $('searchbar').observe('keypress',getSongs);
    });

    function getSongs(event){
        var searchTerm=$('searchbar').value;
        var option=Form.getInputs('searchForm','radio','option').find(function(radio) { return radio.checked; }).value;
        new Ajax.Request('search.php',{
           method:'post',
           parameters:{option:option,query:searchTerm},
           onSuccess:addSongs
        });

    }
    function addSongs(data){
         $('listSongs').innerHTML='';

        var response=eval('(' + data.responseText + ')');
        for(var i=0;i<response.length;i++){
            if(i==limitResults){
                break;
            }
            var info=response[i]['artist']+' '+response[i]['track'];
            var li=new Element('li');
            var div=new Element('div',{'class':'info'});
            var img=new Element('img',{'search':info,'src':'playIcon.png','height':'25px','width':'25px','id':i});
            img.observe('click',requestLink);
            var artist=new Element('span',{'class':'artist'});
            artist.update(response[i]['artist']);

            var track=new Element('span',{'class':'track'});
            track.update(response[i]['track']);
            
            div.insert(artist);
            div.insert("<br>");
            div.insert(track);
            
            li.insert(img);
            li.insert(div);

            $('listSongs').insert(li);
        }
    }
    function updateLink(data){
        var link='http://www.youtube.com/embed/'+data.responseText;
        var iframe=new Element('iframe',{'src':link,'width':'550','height':'290'});
        $('ytplayer').update(iframe);
    }
    function suggest(event){
        new Ajax.Request('search.php',{
           method:'post',
           parameters:{option:'artist',query:this.innerHTML},
           onSuccess:addSongs
        });
        $('listSuggestions').update();
    }
    function updateSuggestions(data){
        $('listSuggestions').update();
        var response=eval('('+data.responseText+')');
        for(var i=0;i<response.length;i++){
            var li=new Element('li');
            var span=new Element('span');
            span.observe('click',suggest);
            span.insert(response[i]);
            li.update(span);
            console.log(response[i]);
            $('listSuggestions').insert(li);
        }
    }
    function requestLink(id){
        var info=$(this.id).getAttribute('search');
        new Ajax.Request('YouTube.php',{
           method:'get',
           parameters:{search:info},
           onSuccess:updateLink
        });
        var parent=document.getElementById(this.id).parentNode;
        var childNodes=parent.childNodes;
        var artist=childNodes[1].childNodes[0].innerHTML;
        new Ajax.Request('recommendation.php',{
           method:'get',
           parameters:{artist:artist},
           onSuccess:updateSuggestions
        });
    }
	
	

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }
</script>
<title>Untitled Document</title>
</head>

<body>


<div id="top">

<div id="rechtsboven"


   <form id="loginform" action="" method="post" name="contact_form">
                <ul>
                    
                    <li>
                        <input  type="text" name="user" placeholder="email" id="email"/>
                    </li>
                    <li>
                        <input  type="text" name="pass" placeholder="password" id="password"/>
                    </li>
                    <li>
                        <button id="loginbutton" type="submit" >login</button>
                    </li>
                </ul>
                </form>
                <span id="reg"><a href="registreer.html">registreer</a></span>
           </div>   
          
        <center><span id="logo"><img src="logo.png"  /></span> </center>
</div>


<div id="blackbar">
                <form id="searchForm" action="" method="post" name="contact_form">
               
                        <input  type="text" name="user" placeholder="Search for your song or artist" id="searchbar"/>
                                        
                        <input type="button" id="searchButton" value="Go!"/>
                
                </form>
                
                
                
                
             
</div>

<center>
<div id="main">

						<div id="wrappersug">
                                                    
                                                    				<div id="headersug">
                                                                    	<h2>SUGGESTIONS</h2></div>
                                                                    
                                                                    
                                                                    
                                									<div id="suggestions">
                                    								<ul id="listSuggestions"></ul>
                                									</div>
                                            		</div>
                                                    
                                                    
                                                    <div id="wrapperres">
                                                    
                                                    			<div id="headerres">
                                                                	<h2>RESULTS</h2></div>
                                                                    
                                                                    
                                                                <div id="results">
                                                                    <ul id="listSongs">
                                                                    </ul>
                                                                    
                                                                </div>
                                                    </div>
                                
                                					
                                
                                			
                                					
                                                    
                                                    
                                                    
                                                   <div id="middle">
                                                  					
                                                  
                                                  					<div>
                                                                                    <div id="wrapperplayer">
                                                                                        <div id="headerplayer">
                                                                                            <h2>CURRENTLY PLAYING</h2></div>
                                                                                        
                                                                                                <div id="ytplayer">
                                                                                                </div>
                                                                                    </div>
                                                                                    
                                                                            
                                                                                    <div id="wrapperinfo">
                                                                                        <div id="headerinfo">
                                                                                            <h2>INFORMATION</h2></div>
                                                                                        
                                                                                                <div id="information">
                                                                                                </div>
                                                                                    </div>
                                                   					</div>
                                                                    
                                                                    
                                                                    
                                                                    
                                                                    
                                                             
                                                                                         <!--   <div>
                                                                                                        <div id="wrapperartist">
                                                                                                            <div id="headerplayer">
                                                                                                                <h2>ARTIST INFO</h2></div>
                                                                                                            
                                                                                                                    <div id="artistinfo">
                                                                                                                    
                                                                                                                        <div id="avatar">plaatje hier
                                                                                                                        </div>
                                                                                                                        <div id="tracks">tracks bullshit hier
                                                                                                                        </div>
                                                                                                                        <div id="bio">bio hierso bitch
                                                                                                                        </div>
                                                                                                                        
                                                                                                                    
                                                                                                                    
                                                                                                                    </div>
                                                                                                        </div>
                                                                                                        
                                                                                                
                                                                                                        <div id="wrapperalbums">
                                                                                                            <div id="headerinfo">
                                                                                                                <h2>ALBUMS</h2></div>
                                                                                                            
                                                                                                                    <div id="albums">
                                                                                                                        <div id="albumcover">albumcover
                                                                                                                        </div>
                                                                                                                        <div id="albumcover">albumcover
                                                                                                                        </div>
                                                                                                                        <div id="albumcover">albumcover
                                                                                                                        </div>
                                                                                                                        <div id="albumcover">albumcover
                                                                                                                        </div>
                                                                                                                        
                                                                                                                    </div>
                                                                                                        </div>
                                                                                        </div>
                                                             
                                                    -->
                                                    </div> <!-- end middle --> 
                                                    
                                                    
                                                    
                                                    
                                                    
                                            
                                            
                            </div>
</div>
</center>

<div id="bottom">
</div>



</body>
</html>
